<template>
  <div class="page-main" v-title data-title="物料领用申请单">
    <home-nav :userData="userinfo"></home-nav>
    <div class="banner"><span>物料领用申请单</span></div>
    <div class="container">
      <div class="header">
        <a-row type="flex" justify="space-between" align="middle">
          <a-col style="display: flex; justify-content: start">
            <a-button class="hte-btn del-btn" @click="addMaterialsConsum">新增</a-button>
            <a-button class="hte-btn del-btn" @click="removeMaterialsConsum" style="color: red">删除</a-button>
            <a-button class="hte-btn del-btn" @click="handleSearch">刷新</a-button>
            <a-button class="hte-btn del-btn" @click="toMaterialsDetail">已领物料查询</a-button>
            <a-button class="hte-btn del-btn" @click="toSapMaterialsDetail">SAP物料查询</a-button>
          </a-col>
          <a-col style="display: flex; justify-content: end">
            <a-button class="hte-btn del-btn" @click="showSearchForm = true">高级搜索</a-button>
          </a-col>
        </a-row>
      </div>

      <a-modal
        :visible="showSearchForm"
        width="70vw"
        :bodyStyle="{ padding: '10px' }"
        title="高级查询"
        @ok="handleSearch"
        @cancel="showSearchForm = false"
      >
        <a-form-model
          ref="ruleForm"
          :laba-col="labelCol"
          :wrapper-col="wrapperCol"
          @keyup.enter.native="handleToSearch"
        >
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-model-item label="申领状态:" prop="materialsType">
                <a-select allowClear v-model="searchForm.applyStatus" placeholder="申领状态">
                  <a-select-option value=""> 全部 </a-select-option>
                  <template v-for="item in codeMaps.MaterialsApplyStatus">
                    <a-select-option :key="item.code" :value="item.code">
                      {{ item.name }}
                    </a-select-option>
                  </template>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="申领单号:" prop="materialsType">
                <a-input v-model="searchForm.consumNum" allowClear> </a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="费用类型:" prop="costNum">
                <a-select allowClear v-model="searchForm.costType" placeholder="费用类型">
                  <template v-for="item in costTypeOptions">
                    <a-select-option :key="item.code" :value="item.code">
                      {{ item.text }}
                    </a-select-option>
                  </template>
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-model-item label="项目名称:">
                <a-input v-model="searchForm.projectName" allowClear> </a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="项目经理:">
                <a-input v-model="searchForm.projectManager" allowClear> </a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="费用号:">
                <a-input v-model="searchForm.costNum" allowClear> </a-input>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-model-item label="申领人:">
                <a-input v-model="searchForm.consumUser" allowClear />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="申请人:">
                <a-input v-model="searchForm.applyUser" allowClear />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="审批人:">
                <a-input v-model="searchForm.auditUser" allowClear />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </a-modal>
      <div class="content-list">
        <a-table
          :scroll="{ x: 1800 }"
          class="hte-table-content"
          :columns="columns"
          :data-source="records"
          :pagination="false"
          :rowKey="(record) => record.id"
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          :customRow="customRow"
          bordered
        >
          <template slot="handlerStepRender" slot-scope="text, record">
            {{ record.handlerStep }}
          </template>
          <template slot="currentHandlerRender" slot-scope="text, record">
            {{ currentHandlerRenderFunc(record) }}
          </template>
          <template slot="statusRender" slot-scope="text, record">
            <template v-for="(code, index) in codeMaps.MaterialsApplyStatus">
              <span :key="index" v-if="record.applyStatus == code.code"> {{ code.name }} </span>
            </template>
          </template>
          <template slot="consumNumRender" slot-scope="text, record">
            <span class="font-active" @click="toDetail(record.id)"> {{ record.consumNum }} </span>
          </template>
          <template slot="materialsTypeRender" slot-scope="text, record">
            <template v-for="item in materialsTypeOptions">
              <span v-if="item.code == record.materialsType" :key="item.code"> {{ item.text }}物资 </span>
            </template>
          </template>
          <template slot="costTypeRender" slot-scope="text, record">
            <template v-for="item in costTypeOptions">
              <span v-if="item.code == record.costType" :key="item.code"> {{ item.text }} </span>
            </template>
          </template>
        </a-table>
        <a-pagination
          show-size-changer
          :default-current="1"
          :total="searchForm.total"
          @change="pageChange"
          @showSizeChange="onShowSizeChange"
          :show-total="(total) => `共 ${total} 条记录`"
        />
      </div>
    </div>
  </div>
</template>
<script>
import { postAction, getAction } from '@/api/manage'
import { ColumnWidthMixin } from '@/views/materials/ColumnWidthMixin'
export default {
  mixins: [ColumnWidthMixin],
  name: 'MaterialsAddConsum',
  components: {
    HomeNav: () => import('@/components/layouts/HomeNav'),
  },
  data() {
    return {
      userinfo: {
        info: this.$store.getters.userInfo,
        module: 'ContractTaskList',
      },
      urls: {
        page: '/materials/page',
        delete: '/materials/delete',
        codes: '/manage/codeInfo/queryByTypes',
      },
      costTypeOptions: [
        { code: '1', text: '成本中心' },
        { code: '2', text: 'WBS号' },
      ],
      materialsTypeOptions: [
        { code: '1', text: '预留' },
        { code: '2', text: 'WBS' },
        { code: '3', text: '公有' },
      ],
      columns: [
        {
          title: '状态',
          dataIndex: 'applyStatus',
          scopedSlots: { customRender: 'statusRender' },
          width: '120px',
          align: 'center',
        },
        // {
        //   title: '当前步骤',
        //   dataIndex: 'handlerStep',
        //   scopedSlots: { customRender: 'handlerStepRender' },
        //   width: '120px',
        //   align: 'center',
        // },
        // {
        //   title: '当前处理人/接收时间/停留时间',
        //   dataIndex: 'handlerUser',
        //   scopedSlots: { customRender: 'currentHandlerRender' },
        //   width: '230px',
        //   align: 'center',
        // },

        {
          title: '申请流水号',
          dataIndex: 'consumNum',
          scopedSlots: { customRender: 'consumNumRender' },
          width: '120px',
          align: 'center',
        },
        {
          title: '拣配单号',
          dataIndex: 'jpno',
          width: '140px',
          align: 'center',
        },
        {
          title: '物资类型',
          dataIndex: 'materialsType',
          width: '100px',
          align: 'center',
          scopedSlots: { customRender: 'materialsTypeRender' },
        },
        {
          title: '费用类型',
          dataIndex: 'costType',
          width: '100px',
          align: 'center',
          scopedSlots: { customRender: 'costTypeRender' },
        },
        {
          title: '费用号',
          dataIndex: 'costNum',
          width: '140px',
          align: 'center',
        },
        {
          title: '项目名称',
          dataIndex: 'projectName',
          width: '120px',
          align: 'left',
          customCell: () => {
            return {
              style: {
                width: '120px',
                overflow: 'hidden',
                whiteSpace: 'nowrap',
                textOverflow: 'ellipsis',
                cursor: 'pointer',
              },
            }
          },
          customRender: (text, record) => (
            <a-tooltip placement="topLeft" title={record.projectName}>
              {record.projectName}
            </a-tooltip>
          ),
        },
        {
          title: '项目负责人',
          dataIndex: 'projectManager',
          width: '110px',
          align: 'center',
        },
        {
          title: '领料人',
          dataIndex: 'consumUser',
          width: '80px',
          align: 'center',
        },
        {
          title: '联系电话',
          dataIndex: 'consumContact',
          width: '120px',
          align: 'center',
        },
        {
          title: '申领物料总价',
          dataIndex: 'applyTotalPrice',
          width: '140px',
          align: 'center',
        },
        {
          title: '申领时间',
          dataIndex: 'consumTime',
          width: '120px',
          align: 'center',
        },
        {
          title: '申请人',
          dataIndex: 'consumUser',
          width: '80px',
          align: 'center',
        },
        // {
        //   title: '审批人',
        //   dataIndex: 'auditUser',
        //   width: '80px',
        //   align: 'center',
        // },
      ],
      showSearchForm: false,
      records: [],
      codeMaps: {},
      selectedRowKeys: [],
      selectedRow: [],
      loading: false,
      labelCol: { span: 8 },
      wrapperCol: { span: 15 },
      searchForm: {
        offset: 0,
        total: 0,
        pageNo: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '40', '50'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
      },
    }
  },

  created() {
    this.fetchCodes()
    this.fetchList()
  },
  methods: {
    fetchList(id) {
      postAction(this.urls.page, this.searchForm).then((res) => {
        if (res.code == 200) {
          this.records = res.result.records
          this.$set(this.searchForm, 'total', res.result.total)
          this.showSearchForm = false
          this.columns = this.calcMaktxWidth(this.records, this.columns, ['projectName'])
        } else {
          this.$message.error('获取数据失败')
        }
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    fetchCodes() {
      getAction(this.urls.codes, { types: 'MaterialsApplyStatus' }).then((res) => {
        if (res.success) {
          this.codeMaps = res.result
        }
      })
    },
    handleDelete() {
      if (this.multipleSelection.length <= 0) {
        this.$message.warning('请先选择需要删除的行')
        return
      }
      this.$confirm('是否确认删除所选择行?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        let ids = []
        for (let row of this.multipleSelection) {
          if (row.nid > 0) {
            ids.push(row.nid)
          }
        }
        if (ids.length > 0) {
          postAction(this.urls.deleteconsumItems, ids).then((res) => {
            if (res.code == 200) {
              this.$message.success('删除成功')
            } else {
              this.$message.error('删除失败')
            }
          })
        }
        let delCount = 0
        this.multipleSelection.forEach((row1) => {
          this.consum.items.splice(row1.rowIndex - delCount, 1)
          delCount++
        })
        this.countTotalPrice()
      })
    },
    onSelectChange(selectedRowKeys, selectedRow) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRow = selectedRow
    },
    customRow(record) {
      return {
        on: {
          dblclick: (event) => {
            this.toDetail(record.id)
          },
        },
      }
    },
    toDetail(id) {
      let urlJump = this.$router.resolve({ path:'/materials/editConsum/' + id })
      window.open(urlJump.href, '_blank')
    },
    currentHandlerRenderFunc(record) {
      let text = ''
      if (record.handlerUser) {
        if (record.handlerTime) {
          text = record.handlerUser + '/' + record.handlerTime + '/' + record.stayDays + '天'
        }
      }
      return text
    },
    addMaterialsConsum() {
      let urlJump = this.$router.resolve({ path:'/materials/addConsum/' })
      window.open(urlJump.href, '_blank')
    },
    removeMaterialsConsum() {
      if (this.selectedRowKeys && this.selectedRowKeys.length > 0) {
        for (let row of this.selectedRow) {
          if (row.applyStatus == '2' || row.applyStatus == '4') {
            return this.$message.warning(row.consumNum + '已审批通过或已同步到sap,请勿删除')
          }
        }
      } else {
        return this.$message.warning('请至少选择一条记录进行操作')
      }
      let that = this
      this.$confirm({
        content: `确认删除已算中的记录吗？`,
        onOk: () => {
          postAction(that.urls.delete, that.selectedRowKeys).then((res) => {
            if (res.success) {
              that.$message.success('删除成功')
              this.handleSearch()
            }
          })
        },
      })
    },
    handleSearch() {
      this.$set(this.searchForm, 'pageNo', 1)
      this.fetchList()
    },
    pageChange(pageNo, pageSize) {
      this.$set(this.searchForm, 'pageSize', pageSize)
      this.$set(this.searchForm, 'pageNo', pageNo)
      this.fetchList()
    },
    onShowSizeChange(pageNo, pageSize) {
      this.$set(this.searchForm, 'pageSize', pageSize)
      this.$set(this.searchForm, 'pageNo', 1)
      this.fetchList()
    },
    toMaterialsDetail(){
      this.windowOpen("/materials/consumMaterials")
    },
    toSapMaterialsDetail(){
      this.windowOpen("/materials/sapMaterials")
    },
  },
}
</script>

<style scoped>
.demo-table-expand .a-form-model-item {
  margin-right: 0;
  margin-bottom: 0px;
}
.demo-table-expand span {
  display: inline-block;
  white-space: nowrap;
  width: 95%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.a-form-model-item >>> .a-form-model-item--mini .a-form-model-item__label {
  color: #606266 !important;
  font-size: 12px !important;
  font-weight: normal;
}
.a-table >>> .a-table__expanded-cell[class*='cell'] {
  padding: 0px 0px 10px 0px;
}

.expand-title {
  height: 30px;
  line-height: 30px;
  background-color: #f1f1f1;
  padding-left: 50px;
  margin-bottom: 5px;
  font-size: 12px;
}
.a-form-model-item >>> .a-form-model-item__content {
  height: 36px;
}
.ellipse-tooltips {
  display: inline-block;
  white-space: nowrap;
  width: 95%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ellipse-tooltips span {
  width: unset !important;
}
.a-range >>> .a-range-separator {
  width: 20px;
}
.searchForm {
  display: flex;
  flex-direction: row;
}
.searchForm-left {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 85vw;
}
.searchForm-right {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  min-width: 280px;
  border-left: #cccccc 2px solid;
}
</style>

<style lang="less" scoped>
@import '~@assets/less/hte-main.less';
.page-main {
  .banner {
    background-image: url(~@assets/contract-top.png);
  }
  .container {
    .content-list {
      margin-top: 15px;
    }
  }
  .font-active {
    cursor: pointer;
  }
}
/deep/ #process-container {
  width: unset !important;
}
#process-container {
  background: #fff;
  padding: 40px 22px;
  width: auto;
  margin: 0 auto;
  -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
}
.hte-table-content{margin-bottom: 20px;}
</style>

